<#compress>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>流水查询</title>
	<#include "include.ftl"/>
    <link rel="stylesheet" href="${base}/lib/mobiscroll.custom-2.6.2.min.css"/>
    <script type='text/javascript' src='${base}/lib/mobiscroll.custom-2.6.2.min.js'></script>
    <script type='text/javascript' src='${base}/lib/iscroll.js'></script>

    <style>
        .am-tabs-d2 .am-tabs-nav li{
            height: 50px;
        }
        .am-tabs-d2 .am-tabs-nav a{
            line-height: 50px;
        }
        /*tiaoj*/
        .condition{
            display: flex;justify-content: space-between;padding: 0 .4em;line-height: 3em;height: 3em;border-bottom: 1px solid #dddddd;
        }
        .am-offcanvas ul li{
            padding: 0 .4em;
        }
        .am-offcanvas button{
            margin-top: .5rem;width: 90%;margin-left: 5%
        }
        .layui-m-layer{
            z-index: 2000;
        }
        .nav-btn{
            width: 100%;
            position: relative;
            bottom: 0;
            height: 40px;
            text-align: center;
            color: white;
            margin-top: 15px;

        }

        .query_list {
            background: #FFFFFF;
            color: #7e7e7e;
            overflow: auto;
            /*margin-bottom: 80px;*/
        }
        .bor_bottom {
            border-bottom: 1px dashed #E5E5E5;
        }

        .bor_bottom p {
            margin: 0;
            padding: 2px 0;
        }
        .bor_bottom>.am-u-sm-4 {
            padding-left: .5rem;
            border-right: 1px solid #EEEEEE;
        }
        .bor_bottom>.am-u-sm-4:last-child {
            padding-right: .5rem;
        }
        .am-tabs-bd{
            border: none;
        }
        [class*=am-u-]{
            padding-right: .2rem;
            padding-left: .2rem;
        }
        /**
                 *
                 * Pull down styles
                 *
                 */
        body {
            -webkit-user-select:none;
            -webkit-text-size-adjust:none;
        }
        .wrapper {
            position:inherit; z-index:1;
            left:-9999px;
            width:100%;
            background:#ffffff;
            overflow:auto;
        }

        .scroller {
            position:absolute; z-index:1;
            /*	-webkit-touch-callout:none;*/
            -webkit-tap-highlight-color:rgba(0,0,0,0);
            width:100%;
            padding:0;
        }
        #his-pullDown, #his-pullUp, #today-pullDown, #today-pullUp {
            background:#fff;
            height:40px;
            line-height:40px;
            padding:5px 10px;
            font-weight:bold;
            font-size:14px;
            color:#888;
            text-align: center;
        }
        #his-pullDown .pullDownIcon, #his-pullUp .pullUpIcon,#today-pullDown .pullDownIcon, #today-pullUp .pullUpIcon  {
            display:block; float:left;
            width:40px; height:40px;
            <#--background:url(${base}/images/pull-icon@2x.png) 0 0 no-repeat;-->
            -webkit-background-size:40px 80px; background-size:40px 80px;
            -webkit-transition-property:-webkit-transform;
            -webkit-transition-duration:250ms;
        }
        #his-pullDown .pullDownIcon,#today-pullDown .pullDownIcon {
            -webkit-transform:rotate(0deg) translateZ(0);
        }
        #his-pullUp .pullUpIcon,#today-pullUp .pullUpIcon  {
            -webkit-transform:rotate(-180deg) translateZ(0);
        }

        #his-pullDown.flip .pullDownIcon,#today-pullDown.flip .pullDownIcon {
            -webkit-transform:rotate(-180deg) translateZ(0);
        }

        #his-pullUp.flip .pullUpIcon,#today-pullUp.flip .pullUpIcon {
            -webkit-transform:rotate(0deg) translateZ(0);
        }

        #his-pullDown.loading .pullDownIcon, #his-pullUp.loading .pullUpIcon,#today-pullDown.loading .pullDownIcon, #today-pullUp.loading .pullUpIcon {
            background-position:0 100%;
            -webkit-transform:rotate(0deg) translateZ(0);
            -webkit-transition-duration:0ms;

            -webkit-animation-name:loading;
            -webkit-animation-duration:2s;
            -webkit-animation-iteration-count:infinite;
            -webkit-animation-timing-function:linear;
        }

        @-webkit-keyframes loading {
            from { -webkit-transform:rotate(0deg) translateZ(0); }
            to { -webkit-transform:rotate(360deg) translateZ(0); }
        }
    </style>

</head>
<body ontouchstart>
    <div data-am-widget="tabs" class="am-tabs am-tabs-d2" style="margin: 0">
        <ul class="am-tabs-nav am-cf" style="z-index: 6666;position: fixed">
            <li class="am-active"><a href="#data-tab-panel-0">历史查询</a></li>
            <li class=""><a href="#data-tab-panel-1">当日查询</a></li>
        </ul>
        <div class="am-tabs-bd" style="padding-top: 50px">
            <div id="data-tab-panel-0" class="am-tab-panel am-active m-demo" style="padding:0;">
                <div class="condition">
                    <span id="condition-text" style="font-size: 15px;color: #a8a8a8;">最近一天</span>
                    <input type="hidden" id="con-start">
                    <input type="hidden" id="con-end">
                    <span><button type="button" class="am-btn am-btn-success am-radius doc-oc-js" >条件查询</button></span>
                </div>


                <div id="his-wrapper" class="wrapper">
                    <div class="scroller">
                        <div id="his-pullDown" class="flip">
                            <span class="pullDownLabel">下拉刷新</span>
                        </div>

                        <div id="his-thelist" class="am-g query_list">

                        </div>
                        <div id="his-pullUp" style="display: none">
                            <span class="pullUpLabel">上拉加载更多</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="data-tab-panel-1" class="am-tab-panel m-demo" style="padding:0;">
                <div id="today-wrapper" class="wrapper">
                    <div class="scroller">
                        <div id="today-pullDown" class="flip">
                            <span class="pullDownLabel">下拉刷新</span>
                        </div>

                        <div id="today-thelist" class="am-g query_list">
                        <#--<div class="bor_bottom am-u-sm-12" style="padding: 0;">-->
                                <#--<div class="am-u-sm-4">-->
                                    <#--<p style="font-size: 15px;color: #a8a8a8;">08:30</p>-->
                                    <#--<p class="year" style="font-size: 15px;color: #a8a8a8;">2017/03/07</p>-->
                                <#--</div>-->
                                <#--<div class="am-u-sm-4">-->
                                    <#--<p style="font-size: 18px;color: #ff9039;">200.00</p>-->
                                    <#--<p style="font-size: 12px;color: #a8a8a8;">一卡通充值</p>-->
                                <#--</div>-->
                                <#--<div class="am-u-sm-4" style="font-size: 12px;color: #a8a8a8;text-align: right;">-->
                                    <#--<p>余额 &nbsp;0.00</p>-->
                                    <#--<p style="margin-top: 6px;">高坪教工食堂</p>-->
                                <#--</div>-->
                            <#--</div>-->
                        </div>
                        <div id="today-pullUp" style="display: none">
                            <span class="pullUpLabel">上拉加载更多</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div id="my-offcanvas" class="am-offcanvas">
            <div class="am-offcanvas-bar" style="width: 80%;background: #ffffff">
                <div class="am-offcanvas-content" style="padding: 55px 0 0 0">
                    <ul style="list-style: none;padding: 0;margin: 0" id="date_ul">
                        <li style="text-align: center">
                            <button type="button" value="2" class="am-btn am-btn-primary am-btn-xs">最近两天</button>
                        </li>
                        <li style="text-align: center">
                            <button type="button" value="3" class="am-btn am-btn-default am-btn-xs">最近三天</button>
                        </li>
                        <li style="text-align: center">
                            <button type="button" value="7" class="am-btn am-btn-default am-btn-xs">最近七天</button>
                        </li>
                        <li style="text-align: center">
                            <button type="button" value="30" class="am-btn am-btn-default am-btn-xs">最近一月</button>
                        </li>
                        <li style="display: flex;margin-top: 1em">
                            <span style="line-height:2;">流水类型：</span>
                            <select id="TranType" style="padding: .3em;width: 50%">
                                <option value="">请选择类型</option>
                                <#list ls_type as t>
                                    <option value="${t.TranCode}">${t.TranName}</option>
                                </#list>
                            </select>
                        </li>
                        <li style="display: flex;margin-top: 1em">
                            <span style="line-height:2;">开始日期：</span>
                            <input style="padding: .3em;width: 50%" name="start" id="startDate"  type="text" class="am-form-field" placeholder="开始日期" readonly />
                        </li>

                        <li style="display: flex;margin-top: 1em">
                            <span style="line-height:2">结束日期：</span>
                            <input style="padding: .3em;width: 50%" name="end" id="endDate" type="text" class="am-form-field" placeholder="结束日期" readonly />
                        </li>
                    </ul>
                    <button type="button" style="margin-top: 1em" id="queryBtn" class="am-btn am-btn-warning am-radius am-btn-lg am-btn-block">立即查询</button>
                    <button type="button" onclick="javascript:$('#my-offcanvas').offCanvas('close');" class="am-btn am-btn-success am-radius am-btn-lg am-btn-block">关闭</button>

                </div>
            </div>
        </div>
    </div>
    <script type="text/template" id="listTpl">
        {{ for (var i = 0, l = it.data.length; i < l; i++) { }}
        <div class="bor_bottom am-u-sm-12" style="padding: 0;">
            <div class="am-u-sm-4">
                <p style="font-size: 15px;color: #a8a8a8;">{{=it.data[i].TranTime.substr(0,10)}}</p>
                <p class="year" style="font-size: 15px;color: #a8a8a8;">{{=it.data[i].TranTime.substr(11,8)}}</p>
            </div>
            <div class="am-u-sm-4">
                <p style="font-size: 18px;color: #ff9039;">{{=it.data[i].TranMoney/100}}</p>
                <p style="font-size: 12px;color: #a8a8a8;">{{=it.data[i].TranType.replace(/持卡人/g,'')}}</p>
            </div>
            <div class="am-u-sm-4" style="font-size: 12px;color: #a8a8a8;">
                <p>余额 &nbsp;{{=it.data[i].CurrBalance/100}}</p>
                <p style="margin-top: 6px;">{{=it.data[i].TranAdd.replace(/持卡人/g,'')}}</p>
            </div>
        </div>
        {{ } }}
    </script>


    <script>
        var current_page=1;
        var myScroll,
                pullDownEl, pullDownOffset,
                pullUpEl, pullUpOffset,
                generatedCount = 0;
        function list_his(params,callback) {
            var start=$('#con-start').val();
            var end=$('#con-end').val();
            var TranType=$('#TranType').val();
            get('api/${api_prefix}/one_card_ls?plat=001&access_token=${RequestParameters["access_token"]}',$.extend({page:current_page,flag:'02',begDate:start,endDate:end,tranType:TranType},params),callback);
        }
        function html_list(result) {
            var tmpl = document.getElementById('listTpl').innerHTML;
            var doTtmpl = doT.template(tmpl);
            return doTtmpl(result);
        }
        function pullHisDownAction () {
            current_page=1;
            list_his(null,function (result) {
                var html = html_list(result);
                if(result.data.length>0){
                    document.getElementById('his-thelist').innerHTML=html;
                }else{
                    document.getElementById('his-thelist').innerHTML='<span class="pullDownLabel" style="text-align: center;position: absolute;width: 100%">当前没有更多数据</span>';
                }
                myScroll.refresh();
            });
        }

        function pullHisUpAction () {
            current_page++;
            list_his(null,function (result) {
                var html = html_list(result);
                myScroll.refresh();
                if(result.data.length>0){
                    $('#his-thelist').append(html);
                }else{
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '<span class="pullDownLabel" style="text-align: center;;width: 100%">当前没有更多数据</span>';
                }

            });
        }

        function hisloaded() {
            pullDownEl = document.getElementById('his-pullDown');
            pullDownOffset = pullDownEl.offsetHeight;
            pullUpEl = document.getElementById('his-pullUp');
            pullUpOffset = pullUpEl.offsetHeight;
            myScroll = new iScroll('his-wrapper', {
                useTransition: true,
                topOffset: pullDownOffset,
                onRefresh: function () {
                    if (pullDownEl.className.match('loading')) {
                        pullDownEl.className = '';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载完毕';
                    } else if (pullUpEl.className.match('loading')) {
                        pullUpEl.className = '';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
                    }
                },
                onScrollMove: function () {
                    if (this.y > 5 && !pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'flip';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
                        this.minScrollY = 0;
                    } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                        pullDownEl.className = '';
                        this.minScrollY = -pullDownOffset;
                    } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip') && this.maxScrollY<0) {
                        pullUpEl.className = 'flip';
                        pullUpEl.style.display = 'block';
                        this.maxScrollY = this.maxScrollY;
                    } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip') && this.maxScrollY<0) {
                        pullUpEl.className = '';
                        pullUpEl.style.display = 'block';
                        this.maxScrollY = pullUpOffset;
                    }
                },
                onScrollEnd: function () {
                    if (pullDownEl.className.match('flip')) {
                        pullDownEl.className = 'loading';
                        pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
                        pullHisDownAction();	// Execute custom function (ajax call?)
                    } else if (pullUpEl.className.match('flip')) {
                        pullUpEl.className = 'loading';
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
                        pullHisUpAction();	// Execute custom function (ajax call?)
                    }
                }
            });
            document.getElementById('his-wrapper').style.left = '0';
            document.getElementById('his-wrapper').style.height = ($(window).height()-98)+'px';
        }

        $(function () {
            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            setTimeout(hisloaded, 200);


            var $myOc = $('#my-offcanvas');
            $('.doc-oc-js').on('click', function() {
                $myOc.offCanvas('open');
            });
            var init_start=new Date().addDate(0-2).format('yyyy-MM-dd');
            var init_end=new Date().addDate(0-1).format('yyyy-MM-dd');
            $('#con-start').val(init_start);
            $('#con-end').val(init_end);
            $('#condition-text').text(init_start+'至'+init_end);
            var opt={preset : 'date',theme:'android-ics light',mode:'mixed',display:'modal',lang:'zh',dateOrder: 'yymd',dateFormat:'yyyy-mm-dd'};
            $('#startDate').show().val(init_start).scroller('destroy').scroller($.extend(opt,{minDate:new Date().addDate(0-365)}));
            $('#endDate').show().val(init_end).scroller('destroy').scroller($.extend(opt,{maxDate:new Date().addDate(0-1)}));
            $('#date_ul').find('button').click(function () {
                $('#date_ul').find('button').removeClass('am-btn-primary').addClass('am-btn-default');
                $(this).addClass('am-btn-primary');
                var val=$(this).val();
                var text=$(this).text();
                var start=new Date().addDate(0-val).format('yyyy-MM-dd');
                var end=new Date().addDate(0-1).format('yyyy-MM-dd');
                $('#startDate').val(start);
                $('#endDate').val(end);
            });
            $('#queryBtn').click(function () {
                var start=$('#startDate').val();
                var end=$('#endDate').val();
                $('#condition-text').text(start+'至'+end);
                $('#con-start').val(start);
                $('#con-end').val(end);
                current_page=1;
                $('.his-table').find('tbody').empty();
                $('#my-offcanvas').offCanvas('close');
                pullHisDownAction();
            });
        });
    </script>

<script>

    var today_current_page=1;
    var today_myScroll,
            today_pullDownEl, today_pullDownOffset,
            today_pullUpEl, today_pullUpOffset,
            today_generatedCount = 0;

    function today_pullHisDownAction () {
        today_current_page=1;
        list_his({flag:'01',page:today_current_page},function (result) {
            var html = html_list(result);
            if(result.data.length>0){
                document.getElementById('today-thelist').innerHTML=html;
            }else{
                document.getElementById('today-thelist').innerHTML='<span class="pullDownLabel" style="text-align: center;position: absolute;width: 100%">当前没有更多数据</span>';
            }
            today_myScroll.refresh();
        });
    }

    function today_pullHisUpAction () {
        today_current_page++;
        list_his({flag:'01',page:today_current_page},function (result) {
            var html = html_list(result);
            today_myScroll.refresh();
            if(result.data.length>0){
                $('#today-thelist').append(html);
            }else{
                today_pullUpEl.querySelector('.pullUpLabel').innerHTML = '<span class="pullDownLabel" style="text-align: center;;width: 100%">当前没有更多数据</span>';
            }

        });
    }

    function today_loaded() {
        today_pullDownEl = document.getElementById('today-pullDown');
        today_pullDownOffset = today_pullDownEl.offsetHeight;
        today_pullUpEl = document.getElementById('today-pullUp');
        today_pullUpOffset = today_pullUpEl.offsetHeight;
        today_myScroll = new iScroll('today-wrapper', {
            useTransition: true,
            topOffset: today_pullDownOffset,
            onRefresh: function () {
                if (today_pullDownEl.className.match('loading')) {
                    today_pullDownEl.className = '';
                    today_pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载完毕';
                } else if (today_pullUpEl.className.match('loading')) {
                    today_pullUpEl.className = '';
                    today_pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多';
                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !today_pullDownEl.className.match('flip')) {
                    today_pullDownEl.className = 'flip';
                    today_pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
                    this.minScrollY = 0;
                } else if (this.y < 5 && today_pullDownEl.className.match('flip')) {
                    today_pullDownEl.className = '';
                    this.minScrollY = -today_pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !today_pullUpEl.className.match('flip') && this.maxScrollY<0) {
                    today_pullUpEl.className = 'flip';
                    today_pullUpEl.style.display = 'block';
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && today_pullUpEl.className.match('flip') && this.maxScrollY<0) {
                    today_pullUpEl.className = '';
                    today_pullUpEl.style.display = 'block';
                    this.maxScrollY = today_pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (today_pullDownEl.className.match('flip')) {
                    today_pullDownEl.className = 'loading';
                    today_pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
                    today_pullHisDownAction();	// Execute custom function (ajax call?)
                } else if (today_pullUpEl.className.match('flip')) {
                    today_pullUpEl.className = 'loading';
                    today_pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
                    today_pullHisUpAction();	// Execute custom function (ajax call?)
                }
            }
        });
        document.getElementById('today-wrapper').style.left = '0';
        document.getElementById('today-wrapper').style.height = ($(window).height()-98)+'px';
    }
    $(function () {
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
        setTimeout(today_loaded, 200);
    });


</script>


</body>

</html>
</#compress>